<template>
  <u-popup
    v-model="showPopup"
    mode="bottom"
    safe-area-inset-bottom
    border-radius="22"
  >
    <!-- <view class="coupon-page" v-if="showPopup"> -->
    <!-- <view class="page-bg" @click="showPopup = false"></view> -->
    <view class="page-content">
      <view class="page-header">
        <view>{{ $t("common.coupon") }}</view>
        <image
          @click="showPopup = false"
          :src="asyncImgs.images.white_close_icon"
          alt=""
        ></image>
      </view>

      <!-- 已选择优惠券 -->
      <!-- <view class="haved-coupon" v-if="activeIndex >= 0">
                <text>您已选中优惠券1张。共可抵用</text>
                <text class="red-price"
                    >￥{{ couponList[activeIndex].sub_price }}</text
                >
            </view> -->

      <!-- 优惠券列表 -->
      <scroll-view :scroll-y="true" style="height: calc(100vh - 500rpx)">
        <view class="coupon-list">
          <view
            class="coupon-item"
            v-for="(item, index) in couponList"
            :key="index"
            @click="selectItem(item, index)"
          >
            <view class="coupon-top">
              <view class="coupon-name">
                <view>{{ item.name }}</view>
                <view v-if="item.expire_type != 1"
                  >{{ item.begin_time }}-{{ item.end_time }}</view
                >
                <view v-if="item.expire_type == 1 && item.expire_day == 0"
                  >永久有效</view
                >
                <view v-if="item.expire_type == 1 && item.expire_day > 0">{{
                  "领取" + item.expire_day + "天后失效"
                }}</view>
              </view>
              <view class="coupon-price">
                <view>
                  <text v-if="item.discount_type != 1">¥</text>
                  <text v-if="item.discount_type != 1">{{
                    item.sub_price
                  }}</text>
                  <text v-if="item.discount_type == 1" style="font-size: 38rpx"
                    >{{ item.discount }}折</text
                  >
                </view>
                <view>{{ item.min_price_desc }}</view>
              </view>
            </view>
            <view class="coupon-down">
              <view class="coupon-down-info">
                <!-- 折叠区域 -->
                <view class="coupon-fold">
                  <u-collapse
                    class="collapse"
                    ref="collapse"
                    :head-style="{
                      padding: 0,
                      lineHeight: '48rpx',
                      color: '#666',
                      fontSize: '24rpx',
                    }"
                    :body-style="{
                      fontSize: '24rpx',
                      color: '#999',
                    }"
                  >
                    <u-collapse-item title="详细信息">
                      <view>
                        {{ $t("coupon.rules") }}:
                        {{ item.appoint_type | typeFormate }}</view
                      >
                      <view>{{ $t("coupon.explain") }}: {{ item.rule }}</view>
                    </u-collapse-item>
                  </u-collapse>
                </view>
                <!-- 选择按钮 -->
                <view class="has-select-coupon">
                  <i
                    v-if="activeIndex == index"
                    class="iconfont icon-success-fill"
                    style="color: #f7271f; font-size: 42rpx"
                  ></i>
                  <view class="unselected" v-else></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <view class="page-footer">
        <view @click="handleConfirm">{{ $t("list.confirm") }}</view>
      </view>
    </view>
    <!-- </view> -->
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      activeIndex: -1,
      showCouponSummary: false,
    };
  },
  props: {
    couponList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    coupon: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    coupon(val) {
      this.couponList.forEach((d, index) => {
        if (val.user_coupon_id == d.user_coupon_id) {
          this.activeIndex = index;
        }
      });
    },
  },
  filters: {
    typeFormate: (val) => {
      switch (val) {
        case "2":
          return "仅限商品使用";
        case "1":
          return "仅限分类使用";
        default:
          return "";
      }
    },
  },
  mounted() {
    let couponList = JSON.parse(JSON.stringify(this.couponList));
    couponList.sort((a, b) => {
      return b.sub_price - a.sub_price;
    });
    if (couponList.length) {
      let id = couponList[0].id;
      let coupon = this.couponList.find((item) => {
        return item.id == id;
      });
      let index = this.couponList.findIndex((item) => {
        return item.id == id;
      });
      this.selectItem(coupon, index);
    }
    this.handleConfirm();
  },
  methods: {
    // 展示弹框
    setShowPopup() {
      this.showPopup = !this.showPopup;
      this.$nextTick(() => {
        // 给每个折叠面板重新计算高度  内置方法
        this.$refs["collapse"]?.forEach((item) => {
          item.init();
        });
      });
    },

    // 选择优惠券
    // 2.0优化版添加了取消优惠券逻辑
    selectItem(item, index) {
      if (index != this.activeIndex) {
        this.activeIndex = index;
      } else {
        this.activeIndex = -1;
      }
    },

    // 点击确认按钮
    handleConfirm() {
      let coupon = this.couponList[this.activeIndex] || {};
      this.$emit("selectCouponCb", {
        coupon,
      });
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
// .coupon-page {
// 	width: 100%;
// 	min-height: 100vh;
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	z-index: 111;

// .page-bg {
// 	width: 100%;
// 	min-height: 100vh;
// 	background-color: #3d3d3d;
// 	opacity: 0.75;
// }

.page-content {
  width: 100%;
  background: #ffffff;
  border-radius: 22rpx 22rpx 0 0;
  position: relative;
  // bottom: 0;
  .page-header {
    width: 100%;
    height: 98rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    view {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
      display: flex;
      align-items: baseline;
    }

    image {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 36rpx;
      top: 29rpx;
      z-index: 11;
    }
  }

  .haved-coupon {
    height: 80rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #383838;
    line-height: 44rpx;
    border-bottom: 1rpx solid#F2F2F2;
    padding-left: 36rpx;

    .red-price {
      color: #f2270c;
    }
  }
  > scroll-view {
    background: #f2f2f2;
  }
  .coupon-list {
    padding-top: 24rpx;

    .coupon-item {
      width: 678rpx;
      min-height: 226rpx;
      background: #ffffff;
      border-radius: 24rpx;
      margin: 0 auto 24rpx;

      .coupon-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 2rpx dashed #eeeeee;

        .coupon-name {
          text-align: left;
          line-height: 44rpx;
          font-family: PingFang SC;

          view:nth-child(1) {
            font-size: 32rpx;
            font-weight: 500;
            color: #262626;
            line-height: 44rpx;
            margin-bottom: 24rpx;
          }

          view:nth-child(2) {
            font-size: 22rpx;
            font-weight: 400;
            color: #8c8c8c;
          }
        }

        .coupon-price {
          text-align: right;

          view:nth-child(1) {
            color: #f7271f;
            font-family: PingFang SC;
            font-weight: 500;
            display: flex;
            align-items: baseline;
            justify-content: flex-end;
            font-size: 56rpx;
            margin-bottom: 12rpx;

            text:first-child {
              font-size: 28rpx;
            }
          }

          view:nth-child(2) {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 44rpx;
          }
        }
      }

      .coupon-down {
        padding: 24rpx 46rpx 30rpx 35rpx;

        .coupon-down-info {
          display: flex;
          justify-content: space-between;

          .coupon-fold {
          }

          .has-select-coupon {
            .unselected {
              width: 32rpx;
              height: 32rpx;
              background: #ffffff;
              border: 3rpx solid #8c8c8c;
              border-radius: 16rpx;
            }
          }
        }

        .coupon-summary {
          padding-top: 20rpx;

          view {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-bottom: 20rpx;
          }

          view:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .coupon-item::before {
      content: "";
      width: 24rpx;
      height: 24rpx;
      background-color: #f2f2f2;
      border-radius: 50%;
      position: absolute;
      left: 24rpx;
      top: 196rpx;
      z-index: 11;
    }

    .coupon-item::after {
      content: "";
      width: 24rpx;
      height: 24rpx;
      background-color: #f2f2f2;
      border-radius: 50%;
      position: absolute;
      right: 24rpx;
      top: 196rpx;
      z-index: 11;
    }
  }

  .page-footer {
    width: 100%;
    height: 99rpx;
    background: #ffffff;
    box-shadow: 0 1rpx 0 0 #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;

    view {
      width: 678rpx;
      height: 76rpx;
      background: linear-gradient(90deg, #ff4e18, #f32524);
      border-radius: 38rpx;
      text-align: center;
      line-height: 76rpx;
      font-size: 30rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #ffffff;
    }
  }
}

// }
</style>
